import {
    createDrawerNavigator,
    DrawerContentScrollView,
    DrawerItemList,
    DrawerItem,
} from '@react-navigation/drawer';
import {ScrollView, Text, View} from 'react-native';
import * as React from 'react';
import {Avatar, Icon} from '@rneui/themed';

import Printer from '../../Page/base/Printer';
import About from '../../Page/base/About';
import Tab from './Tab';

const RootDrawer = createDrawerNavigator();

export default function Drawer() {
    return (
        <RootDrawer.Navigator
            screenOptions={{
                drawerStyle: {
                    width: '60%',
                },
            }}
            initialRouteName={'Tab'}
            drawerContent={props => <CustomDrawerContent {...props} />}>
            <RootDrawer.Screen
                name="Tab"
                component={Tab}
                options={{
                    title: '主页',
                    drawerIcon: ({color, size}) => (
                        <Icon color={color} name="home" size={size} type="antdesign"/>
                    ),
                }}
            />
            {
                config.ENABLE_PRINTER === "true" ? (
                    <RootDrawer.Screen
                        name="Printer"
                        component={Printer}
                        options={{
                            title: '打印机',
                            drawerIcon: ({color, size}) => (
                                <Icon color={color} name="printer" size={size} type="antdesign"/>
                            ),
                        }}
                    />
                ) : null
            }
            <RootDrawer.Screen
                name="About"
                component={About}
                options={{
                    title: '关于',
                    drawerIcon: ({color, size}) => (
                        <Icon
                            color={color}
                            name="message-text-outline"
                            size={size}
                            type="material-community"
                        />
                    ),
                }}
            />
        </RootDrawer.Navigator>
    );
}

function CustomDrawerContent(props) {
    return (
        <DrawerContentScrollView
            {...props}
            contentContainerStyle={{flex: 1, justifyContent: 'space-between'}}>
            <View style={{flexDirection: 'row'}}>
                <Avatar
                    activeOpacity={0.2}
                    containerStyle={{backgroundColor: '#BDBDBD'}}
                    icon={{name: 'user', type: 'feather'}}
                    onLongPress={() => alert('长按')}
                    onPress={() =>
                        props.navigation.navigate('User', {
                            name: 'admin',
                        })
                    }
                    rounded
                    size="medium"
                    source={{
                        uri: 'https://gitee.com/taoyaowork/user-data-save/blob/master/picture/cnblogs-icon.jpg',
                    }}
                    title="Luan"
                    titleStyle={{}}
                />
                <Text style={{bottom: 1}}>Luan</Text>
            </View>
            <ScrollView>
                <DrawerItemList {...props} />
            </ScrollView>
            <DrawerItem
                label="登出"
                labelStyle={{color: 'blue'}}
                style={{backgroundColor: '#E8E8E8', marginBottom: '5%'}}
                onPress={() => props.navigation.navigate('Login')}
                icon={({color, size}) => (
                    <Icon
                        color={color}
                        name="logout"
                        size={size}
                        type="material-community"
                    />
                )}
            />
        </DrawerContentScrollView>
    );
}
